<template>
  <div>
    <div class="nav"><bread-crumb></bread-crumb></div>
    <div class="wrap">
      <video
        id="videoCamera"
        class="videoCamera"
        :width="videoWidth"
        :height="videoHeight"
      ></video>
      <canvas
        id="canvasCamera"
        class="canvasCamera"
        :width="videoWidth"
        :height="videoHeight"
      >
      </canvas>
      <div class="btn">
        <el-button @click="photograph">拍照</el-button>
        <!-- 默认状态 切换到当前组件摄像头打开 -->
        <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
        <el-button v-else @click="closeCamera">关闭摄像头</el-button>
        <el-button @click="empty">重置</el-button>
        <el-button @click="up">上传</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true, //gai
      videoWidth: 500,
      videoHeight: 350,
      thisVideo: null,
      thisContext: null,
      thisCanvas: null,
      imgSrc: "",
    };
  },
  mounted() {
    this.openCamera();
  },
  methods: {
    empty() {
      this.thisCanvas = document.querySelector(".canvasCamera");
      this.thisContext = this.thisCanvas.getContext("2d");
      this.thisContext.clearRect(0, 0, this.videoWidth, this.videoHeight);
    },
    up() {
      // 提交按钮的作用  是将this.imgSrc传递给学生信息录入组件  跳转到学生信息录入
      console.log(this.imgSrc);
      this.$router.push({
        name: "stu_luru",
        query: {
          imgSrc: this.imgSrc,
        },
      });
    },
    // 拍照
    photograph() {
      // 获取获取画布
      this.thisCanvas = document.querySelector(".canvasCamera");
      this.thisContext = this.thisCanvas.getContext("2d");

      this.thisContext.drawImage(
        this.thisVideo,
        0,
        0,
        this.videoWidth,
        this.videoHeight
      );
      this.imgSrc = this.thisCanvas.toDataURL("image/png");
    },
    // 打开摄像头
    openCamera() {
      this.flag = false;
      // 获取video
      this.thisVideo = document.getElementById("videoCamera");
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          let getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;

          if (!getUserMedia) {
            return Promise.reject(new Error("请更换浏览器"));
          }
          return new Promise((resolve, reject) => {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      // constraints 传入音频视频文件信息
      const constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
        },
      };

      // 调用摄像头
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((res) => {
          console.log(res);
          console.log(this.thisVideo);
          if ("srcObject" in this.thisVideo) {
            this.thisVideo.srcObject = res;
          } else {
            this.thisVideo.src = window.URL.createObjectURL(res);
          }
          this.thisVideo.onloadedmetadata = function () {
            console.log("视频元数据加载完毕");
            console.log(this);
            this.play();
          };
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: "没有开启摄像头或者浏览器不支持请求更换浏览器",
            type: "warning",
          });
        });
    },
    // 关闭摄像头
    closeCamera() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.flag = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  height: 40px;
}
</style>